<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="jakarta.tags.core" %>
<html>
<head>
    <title>${book.title} - 万万书城</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }
        .header {
            background-color: #4CAF50;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .header-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        .logo {
            font-size: 24px;
            font-weight: bold;
        }
        .nav a {
            color: white;
            text-decoration: none;
            margin: 0 15px;
        }
        .nav a:hover {
            text-decoration: underline;
        }
        .content {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        .book-detail-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 30px;
        }
        .book-detail-main {
            display: flex;
            gap: 30px;
            margin-bottom: 30px;
        }
        .book-image-large {
            flex-shrink: 0;
        }
        .book-image-large img {
            width: 300px;
            height: 400px;
            object-fit: cover;
            border-radius: 4px;
        }
        .book-info {
            flex: 1;
        }
        .book-title-large {
            font-size: 28px;
            font-weight: bold;
            margin: 0 0 15px 0;
            color: #333;
        }
        .book-meta {
            margin-bottom: 20px;
            color: #666;
            line-height: 1.6;
        }
        .book-price-large {
            color: #e74c3c;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        .book-actions-large {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .btn {
            padding: 12px 30px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
        }
        .btn-primary {
            background-color: #4CAF50;
            color: white;
        }
        .btn-primary:hover {
            background-color: #45a049;
        }
        .btn-secondary {
            background-color: #2196F3;
            color: white;
        }
        .btn-secondary:hover {
            background-color: #1976D2;
        }
        .btn-disabled {
            background-color: #ccc;
            color: #666;
            cursor: not-allowed;
        }
        .book-description {
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }
        .book-description h3 {
            margin-top: 0;
            color: #333;
        }
        .section-title {
            font-size: 20px;
            font-weight: bold;
            margin: 30px 0 20px 0;
            color: #333;
            border-bottom: 2px solid #4CAF50;
            padding-bottom: 10px;
        }
        .related-books {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 20px;
        }
        .books-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 20px;
        }
        .book-card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            padding: 15px;
            transition: transform 0.3s;
            border: 1px solid #eee;
        }
        .book-card:hover {
            transform: translateY(-5px);
        }
        .book-card .book-title {
            font-size: 16px;
            font-weight: bold;
            margin: 10px 0;
            color: #333;
            height: 48px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        .book-card .book-title a {
            color: #333;
            text-decoration: none;
        }
        .book-card .book-title a:hover {
            color: #4CAF50;
        }
        .book-card .book-price {
            color: #e74c3c;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .book-card .book-image {
            display: flex;
            justify-content: center;
        }
        .book-card .book-image img {
            width: 120px;
            height: 160px;
            object-fit: cover;
        }
        .user-info {
            color: white;
        }
        .user-info a {
            color: white;
            margin-left: 10px;
        }
        .stock-info {
            margin-top: 15px;
            color: #666;
        }
        .stock-available {
            color: #4CAF50;
            font-weight: bold;
        }
        .stock-limited {
            color: #ff9800;
            font-weight: bold;
        }
        .stock-out {
            color: #e74c3c;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-container">
        <div class="logo">万万书城</div>
        <div class="nav">
            <a href="index.jsp">首页</a>
            <a href="cart">购物车</a>
            <a href="order?action=list">我的订单</a>
            <a href="userCenter">用户中心</a>
        </div>
        <div class="user-info">
            <% if (session.getAttribute("user") != null) {
                com.wanwanbookstore.entity.User user = (com.wanwanbookstore.entity.User) session.getAttribute("user");
                out.println(user.getUsername() + " <a href='logout'>退出</a>");
            } else {
                out.println("<a href='login.jsp'>登录</a> <a href='register.jsp'>注册</a>");
            }
            %>
        </div>
    </div>
</div>

<div class="content">
    <c:if test="${not empty errorMessage}">
        <div style="background-color: #ffdddd; color: #d32f2f; padding: 15px; border-radius: 4px; margin-bottom: 20px;">
                ${errorMessage}
        </div>
    </c:if>

    <c:if test="${not empty book}">
        <div class="book-detail-container">
            <div class="book-detail-main">
                <div class="book-image-large">
                    <img src="images/书籍图片jpg/${book.title}, ${book.author}.jpg" alt="${book.title}" onerror="this.src='https://via.placeholder.com/300x400?text=No+Image'">
                </div>

                <div class="book-info">
                    <h1 class="book-title-large">${book.title}</h1>

                    <div class="book-meta">
                        <p><strong>作者：</strong>${book.author}</p>
                        <p><strong>分类：</strong>${book.category}</p>
                    </div>

                    <div class="book-price-large">¥${book.price}</div>

                    <div class="stock-info">
                        <c:choose>
                            <c:when test="${book.stock >= 400}">
                                <span class="stock-available">库存充足，喜欢可以先加入购物车哦~</span>
                            </c:when>
                            <c:when test="${book.stock > 100}">
                                <span class="stock-limited">少量库存，心动不如行动~</span>
                            </c:when>
                            <c:when test="${book.stock > 0}">
                                <span class="stock-limited">仅剩${book.stock}件！！</span>
                            </c:when>
                            <c:otherwise>
                                <span class="stock-out">暂时缺货</span>
                            </c:otherwise>
                        </c:choose>
                    </div>

                    <div class="book-actions-large">
                        <c:choose>
                            <c:when test="${book.stock > 0}">
                                <div style="display: flex; align-items: center; gap: 15px;">
                                    <form action="cart" method="post" style="display: inline;">
                                        <input type="hidden" name="action" value="add">
                                        <input type="hidden" name="bookId" value="${book.id}">
                                        <input type="hidden" name="quantity" value="1">
                                        <button type="submit" class="btn btn-secondary">加入购物车</button>
                                    </form>
                                    <form action="cart" method="post" style="display: flex; align-items: center; gap: 10px;">
                                        <input type="hidden" name="action" value="add">
                                        <input type="hidden" name="bookId" value="${book.id}">
                                        <input type="hidden" name="type" value="direct">
                                        <button type="submit" class="btn btn-primary">立即购买</button>
                                        <div style="display: flex; align-items: center;">
                                            <span>数量：</span>
                                            <input type="number" name="quantity" value="1" min="1" max="${book.stock}" style="width: 60px; text-align: center; padding: 5px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;">
                                        </div>
                                    </form>
                                </div>
                            </c:when>
                            <c:otherwise>
                                <button class="btn btn-disabled" disabled>加入购物车</button>
                                <button class="btn btn-disabled" disabled>立即购买</button>
                            </c:otherwise>
                        </c:choose>
                    </div>
                </div>
            </div>

            <div class="book-description">
                <h3>内容简介</h3>
                <p>${book.description}</p>
            </div>
        </div>

        <div class="related-books">
            <h3 class="section-title">相关推荐</h3>
            <div class="books-grid">
                <c:forEach items="${relatedBooks}" var="relatedBook">
                    <c:if test="${relatedBook.id != book.id}">
                        <div class="book-card">
                            <div class="book-image">
                                <a href="bookDetail?id=${relatedBook.id}">
                                    <img src="images/书籍图片jpg/${relatedBook.title}, ${relatedBook.author}.jpg" alt="${relatedBook.title}" onerror="this.src='https://via.placeholder.com/120x160?text=No+Image'">
                                </a>
                            </div>
                            <div class="book-title">
                                <a href="bookDetail?id=${relatedBook.id}">${relatedBook.title}</a>
                            </div>
                            <div class="book-price">¥${relatedBook.price}</div>
                        </div>
                    </c:if>
                </c:forEach>
            </div>
        </div>
    </c:if>
</div>
</body>
</html>